<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<script type="text/javascript" src="js/lib/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/lib/echarts.min.js"></script>
		<script type="text/javascript" src="js/lib/echarts-gl.min.js"></script>
		<div style="height: 400px;width:100%" >
			<div style="height:  100%;width:100%" >
 			<div id="creditWarning" style="height: 100%;width:100%"></div>
 			</div>
		</div>
    <script type="text/javascript">
    	$(function(){
    		//提前设置父类容器的宽度
    		
    		//
        var myChart = echarts.init(document.getElementById("creditWarning"));
        //先写个静态数据
        var toolTipData = [{value:4055, name:'企业法人'}, {value:10925, name:'个体工商户'}, {value:0, name:'事业单位法人'}, {value:0, name:'社会组织'}, {value:78, name:'社会团体法人'},];
        var option = {
		    title : {
		        text: '',
		        subtext: '',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		       	formatter: function(params) {
		            if(params.value=="undefined"){} //如果没定义就什么不做
	                else {
                        var toolTiphtml = ''
                        for(var i = 0;i<toolTipData.length;i++){
                            if(params.name==toolTipData[i].name){
                                toolTiphtml += toolTipData[i].name+':<br>'+toolTipData[i].value;
                            }
                        }
                        return toolTiphtml;
                    }
	            }
		    },
		    legend: {
		        x : 'center',
		        // y : 'bottom',
		        // data:['企业法人','个体工商户','社会团体法人','事业单位法人','社会组织'],
		        textStyle:{ 
		        	color:" #61d2f7"
		        }
		    }, 
 		    /*toolbox: {  //工具栏
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },*/
		    calculable : true,
		    color:  //调色 盘颜色 默认 一次从右侧数组 读取['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
		    // 	['#c23531','#ff9900','#0066ff',' #e5e600']  //对应预警的颜色   
		     	['#e8451a','#f4b825','#bed273',' #17a390','#2496c1','#5e3287'],  //法人类型对应的颜色

		    series : [
		        {
		            name:'预警类型与数量',
		            type:'pie',
		            // radius : [30, 110],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		            radius:'50%',
		            data:[
                        //伪造数据  以100为基准开始占百分比
                        {value:30, name:'个体工商户'},
                        {value:10, name:'事业单位法人'},
                        {value:10, name:'社会组织'},
                        {value:16, name:'社会团体法人'},
                        {value:20, name:'企业法人'},
		            ]
		        }
		    ]
		};
 if (option && typeof option === "object") {
	    myChart.setOption(option, true);
	}
 });
       </script>
	</body>

</html>